<template>
    <div>
        <div class="register_img">
            <img src="../../assets/touxiang.jpg" alt="">
        </div>
       <!-- 手机号框 -->
         <input type="text" placeholder="请输入手机号" class="phone" v-model="msg.phone">
         <!-- <small>错误提示</small> -->
       <!-- 密码框 -->
        <input type="password" placeholder="请输入密码" class="pass" v-model="msg.password">
          <!-- <small>错误提示</small> -->
        <input type="password" placeholder="确认密码" class="certain_pass" v-model="msg.password">
          <!-- <small>错误提示</small> -->

        <button @click="goIndex">注册  
        </button>
        <div class="process_btn" @click="goLogin">已有账号去登录</div>
    </div>
 
</template>

<script setup>
import{ref,toRefs}from 'vue'
import {post} from "../../utils/request.js";
import {useRouter} from 'vue-router';
let msg  = ref({phone:'',password:""})
const register=async()=>{  
// console.log(msg.value)
   let url="http://shop.bluej.cn/api/register"
   let data={
    "name": "tnf",
    "password": "123456",
    "phone": "18812345678"
   }
   let result=await post("/register",data)
  
}
let router = useRouter();
const goIndex = ()=>{
  router.push('/Index')
}
const goLogin = ()=>{
  router.push('/')
}
</script>

<style lang="scss" scoped>

.register_img{
    margin:0 auto;
    margin-top:1.2rem;
    width: 0.66rem;
    height: 0.66rem;
    img{
        display: block;
        width: 0.66rem;
        height: 0.66rem;
        border-radius: 0.33rem;
    }
}
// 手机号框
.phone{
  margin:0rem auto ;
  margin-left:0.4rem; 
  margin-top:0.4rem;
    width: 2.95rem;
    height: 0.48rem; 
    border-radius: 0.05rem;
    font-size:0.16rem;
    color:#000;
    border:1px solid grey;
    outline:0;
    background-color: #F9F9F9 ;

}
.pass{
    margin:0rem auto ;
  margin-left:0.4rem; 
  margin-top:0.16rem;
    width: 2.95rem;
    height: 0.48rem;
    border-radius: 0.05rem;
     font-size:0.16rem;
    color:#000;
     border:1px solid grey;
    outline:0;
    background-color: #F9F9F9 ;
}
.certain_pass{
    margin:0rem auto ;
  margin-left:0.4rem; 
  margin-top:0.16rem;
    width: 2.95rem;
    height: 0.48rem;
    border-radius: 0.05rem;
     font-size:0.16rem;
    color:#000;
     border:1px solid grey;
    outline:0;
    background-color: #F9F9F9 ;
}
button{
     margin:0rem auto ;
  margin-left:0.4rem; 
  margin-top:0.32rem;
    width: 2.99rem;
    height: 0.52rem;
    background-color:#0091FF;
    font-size:0.16rem;
    color:#fff;
    border:0;
    border-radius:0.1rem;
}
.process_btn{
    float:left;
    margin-left:1.39rem;
    margin-top:0.16rem;
    width: 0.98rem;
    height: 0.2rem;
    font-size:0.14rem;
    color:#000;
}

</style>